<template >
  <div ref="imageDom" class="goodsBox">
    <div class="listName">
      <el-button size="small" type="primary" plain @click="goBack">返回</el-button>
      <el-button v-if="dialogType === 3" size="small" type="primary" plain @click="downloadResult">保存页面为图片</el-button>
    </div>
    <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="20%" status-icon style="background-color: white">
      <el-row :gutter="150">
        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="店铺名称" prop="sellerName">
              <el-input v-model="dialogBindData.sellerName" :disabled="disableIinput" size="small" type="text" placeholder="请输入店铺名称"/>
            </el-form-item>
          </el-col>
          <!--<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="店铺电话" prop="itemSubTitle">
              <el-input v-model="dialogBindData.contactPerson" :disabled="disableIinput" size="small" type="text" placeholder="请输入店铺电话"/>
            </el-form-item>
          </el-col>-->
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="店主姓名" prop="contactPerson">
              <el-input v-model="dialogBindData.contactPerson" :disabled="disableIinput" size="small" type="text" placeholder="请输入店主姓名"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="分配店铺名称" prop="sysSellerName">
              <el-input v-model="dialogBindData.sysSellerName" :disabled="disableIinput" size="small" type="text" placeholder="请输入分配店铺名称"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="店主手机号" prop="contactMobile">
              <el-input v-model="dialogBindData.contactMobile" :disabled="disableIinput" size="small" type="text" placeholder="请输入店主手机号" maxlength="11"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="用户名" prop="userName">
              <el-input :disabled="disabled" v-model="dialogBindData.userName" size="small" type="text" placeholder="请输入用户名"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="密码" prop="passwordnew">
              <el-input v-model="dialogBindData.passwordnew" :disabled="disableIinput" size="small" type="password" placeholder="请输入密码"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="确认密码" prop="password">
              <el-input v-model="dialogBindData.password" :disabled="disableIinput" size="small" type="password" placeholder="请再次输入密码"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="紧急联系人1" prop="urgentContact">
              <el-input v-model="dialogBindData.urgentContact" :disabled="disableIinput" size="small" type="text" placeholder="请输入联系人"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="联系人手机1" prop="urgentContactPhone">
              <el-input v-model="dialogBindData.urgentContactPhone" :disabled="disableIinput" size="small" type="number" placeholder="请输入联系人电话" maxlength="11"/>
            </el-form-item>
          </el-col>
          <!--<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">-->
          <!--<el-form-item label="紧急联系人2" prop="urgentContact">-->
          <!--<el-input v-model="dialogBindData.contactPerson" :disabled="disableIinput" size="small" type="text" placeholder="请输入联系人"/>-->
          <!--</el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">-->
          <!--<el-form-item label="联系人手机2" prop="urgentContactPhone">-->
          <!--<el-input v-model="dialogBindData.contactMobile" :disabled="disableIinput" size="small" type="number" placeholder="请输入联系人电话" maxlength="11"/>-->
          <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="开店时长" prop="shopAge">
              <el-input v-model="dialogBindData.shopAge" :disabled="disableIinput" size="small" type="number" placeholder="请输入开店时长(年)"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="店铺面积" prop="shopArea">
              <el-input v-model="dialogBindData.shopArea" :disabled="disableIinput" size="small" type="number" placeholder="请输入店铺面积"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="微信号" prop="wechatId">
              <el-input v-model="dialogBindData.wechatId" :disabled="disableIinput" size="small" type="text" placeholder="请输入微信号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="QQ号" prop="qq">
              <el-input v-model="dialogBindData.qq" :disabled="disableIinput" size="small" type="text" placeholder="QQ号"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="店内主营渔具品牌" prop="mainBrand">
              <el-input v-model="dialogBindData.mainBrand" :disabled="disableIinput" size="small" type="text" placeholder="店内主营渔具品牌"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="店铺地址" prop="addrRegion3Id" class="three">
              <el-select v-model="dialogBindData.addrRegion1Id" :disabled="disableIinput" placeholder="请选择" size="small" style="width: 32%" @change="provinceListFun($event)">
                <el-option
                  v-for="item in provinceList"
                  :key="item.regionId"
                  :label="item.regionName"
                  :value="item.regionId"/>
              </el-select>
              <el-select v-model="dialogBindData.addrRegion2Id" :disabled="disableIinput" placeholder="请选择" size="small" style="width: 32%" @change="cityListFun($event)">
                <el-option
                  v-for="item in cityList"
                  :key="item.regionId"
                  :label="item.regionName"
                  :value="item.regionId"/>
              </el-select>
              <el-select v-model="dialogBindData.addrRegion3Id" :disabled="disableIinput" placeholder="请选择" size="small" style="width: 32%">
                <el-option
                  v-for="item in areaList"
                  :key="item.regionId"
                  :label="item.regionName"
                  :value="item.regionId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="经纬度" prop="seoDescription">
              <el-input v-model="dialogBindData.coordinateY" :disabled="disableIinput" readonly size="small" type="text" placeholder="经度" style="width: 49%"/>
              <el-input v-model="dialogBindData.coordinateX" :disabled="disableIinput" readonly size="small" type="text" placeholder="纬度" style="width: 49%"/>
              <span style="color: red">请输入要查询的地址,完成后点击地图随意某处获取输入结果的经纬度</span>
            </el-form-item>
          </el-col>
          <div style="margin:20px 13%;">
            <div v-if="dialogType !== 1" class="address"><span>详细地址:</span>{{ dialogBindData.addrStreetSpan }}</div>
            <el-input id="suggestId" :disabled="disableIinput" v-model="dialogBindData.addrStreet" type="text" size="small" name="address_detail" placeholder="请输入详细地址" class="input_style" />
            <div id="allmap" style="width: 100%;height: 500px"/>
          </div>
        </el-col>
        <el-col v-if="dialogType !== 1" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
          <div style="display: flex;flex-direction: column;justify-content: space-between;">
            <div style="margin: 20px 0">我的店铺二维码</div>
            <img :src="dialogBindData.sellerCode" width="100px" height="100px">
            <el-button style="width: 120px;margin-top: 20px" size="small" type="primary" plain @click="downs">下载店铺二维码</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row >
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="店铺logo" prop="logoPicUrl" class="three">
            <a v-if="dialogType === 3" class="imgStyle" >
              <img v-image-preview :src="dialogBindData.logoPicUrl" class="imgStyleImg" >
            </a>
            <logoimg v-else :img-logo-url="dialogBindData.logoPicUrl" :status="dialogType" :dataimgurl="dialogBindData.logoPicUrl" dialog-type="logoimg" @emitSuccess="imgurlFun"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="全景图" prop="panorama" class="three">
            <img v-image-preview v-if="dialogType === 3" :src="dialogBindData.panorama" width="100" height="100">
            <quanimg v-else :img-logo-url="dialogBindData.panorama" :status="dialogType" :dataimgurl="dialogBindData.panorama" dialog-type="quanimg" @emitSuccess="imgurlFun"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="收款二维码" prop="collectionCode" class="three">
            <img v-image-preview v-if="dialogType === 3" :src="dialogBindData.collectionCode" width="100" height="100">
            <qrcodeimg v-else :img-logo-url="dialogBindData.collectionCode" :status="dialogType" :dataimgurl="dialogBindData.collectionCode" dialog-type="qrcodeimg" @emitSuccess="imgurlFun"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="营业执照" prop="bizLicenseNoUrl" class="three">
            <img v-image-preview v-if="dialogType === 3" :src="dialogBindData.bizLicenseNoUrl" width="100" height="100">
            <yingimg v-else :img-logo-url="dialogBindData.bizLicenseNoUrl" :status="dialogType" :dataimgurl="dialogBindData.bizLicenseNoUrl" dialog-type="yingimg" @emitSuccess="imgurlFun"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="授权书" prop="authCertUrl" class="three">
            <img v-image-preview v-if="dialogType === 3" :src="dialogBindData.authCertUrl" width="100" height="100">
            <shouimg v-else :img-logo-url="dialogBindData.authCertUrl" :status="dialogType" :dataimgurl="dialogBindData.authCertUrl" dialog-type="shouimg" @emitSuccess="imgurlFun"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="padding: 0 30px">
        <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="店铺图片" prop="picUrl" class="three">
            <template v-if="dialogType === 3">
              <img v-image-preview v-for="(item,index) of dialogBindData.picUrl" :key="index" :src="item" width="100" height="100">
            </template>
            <dianpuimg v-else ref="dianpuimg" :img-logo-url="dialogBindData.picUrl" :dialog-type="dialogType" :dataimgurl="dialogBindData.picUrl" @emitSuccess="imgurlFundianpu"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="150">
        <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="店铺简介" prop="introduction" class="three">
            <el-input v-model="dialogBindData.introduction" :disabled="disableIinput" size="small" autosize type="textarea" placeholder="简介"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="150" >
        <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="钓龄" prop="fishAge">
            <el-input v-model="dialogBindData.fishAge" :disabled="disableIinput" size="small" type="text" maxlength="3" placeholder="请输入钓龄"/>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="店主是否钓鱼" prop="isFishing">
            <el-radio-group v-model="dialogBindData.isFishing">
              <el-radio :label="0" :disabled="disableIinput">是</el-radio>
              <el-radio :label="1" :disabled="disableIinput">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="150">
        <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="本地情况" prop="memo" class="three">
            <el-input v-model="dialogBindData.memo" :disabled="disableIinput" size="small" autosize type="textarea" placeholder="本地情况"/>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="dialogType !== 3" style="text-align: center;padding: 50px 0">
        <el-button :disabled="disableIinput" type="primary" round style="padding: 10px 50px" @click="submmitFun">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import * as merchant from '../../api/merchant'
import logoimg from '../../views/merchant/component/logoimg'
import qrcodeimg from '../../views/merchant/component/qrcodeimg'
import yingimg from '../../views/merchant/component/yingimg'
import shouimg from '../../views/merchant/component/shouimg'
import quanimg from '../../views/merchant/component/quanimg'
import dianpuimg from '../../views/merchant/component/dianpuimg'
import { isvalidNull, validatePhone } from '../../utils/validate'
export default {
  components: { logoimg, qrcodeimg, yingimg, shouimg, quanimg, dianpuimg },
  /* eslint-disable vue/require-prop-types */
  data() {
    const merchantsPhone = (rule, value, callback) => {
      if (!isvalidNull(value)) {
        callback(new Error('请输入手机号码'))
      } else if (!validatePhone(value)) {
        callback(new Error('请输入正确手机号码'))
      } else {
        callback()
      }
    }
    const passwordOne = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.dialogBindData.password !== '') {
          this.$refs.dialogBindData.validateField('password')
        }
        callback()
      }
    }
    const passwordTow = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.dialogBindData.passwordnew) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      imgUrl: '',
      // 地图
      userlocation: { lng: 108.953719, lat: 34.265297 },
      // 类型
      dialogType: '', // 1--增加  2--编辑
      // 输入禁用
      disableIinput: false,
      disabled: false,
      // 省市区
      provinceList: null,
      cityList: null,
      areaList: null,
      // 编辑反显数据
      editorTabeldata: null,
      dialogBindData: {
        sellerId: null,
        userId: null,
        sellerName: '',
        addrRegion1Id: '',
        addrRegion2Id: '',
        addrRegion3Id: '',
        addrStreetSpan: '',
        addrStreet: '',
        userName: '',
        passwordnew: '',
        password: '',
        urgentContact: '',
        bizLicenseNoUrl: '',
        logoPicUrl: '',
        picUrl: '',
        picId: '',
        urgentContactPhone: '',
        introduction: '',
        memo: '',
        contactPerson: '',
        contactMobile: '',
        shopAge: '',
        shopArea: '',
        wechatId: '',
        qq: '',
        mainBrand: '',
        panorama: '',
        collectionCode: '',
        authCertUrl: '',
        fishAge: '',
        isFishing: 0,
        coordinateY: '',
        coordinateX: '',
        sysSellerName: '',
        sellerCode: '',
        runningStatus: ''
      },
      rules: {
        sellerName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        sysSellerName: [
          { required: true, message: '请输入分配店铺名称', trigger: 'blur' }
        ],
        addrStreet: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        passwordnew: [
          { required: true, validator: passwordOne, trigger: 'blur' }
        ],
        password: [
          { required: true, validator: passwordTow, trigger: 'blur' }
        ],
        contactPerson: [
          { required: true, message: '请输入店主姓名', trigger: 'blur' }
        ],
        contactMobile: [
          { required: true, validator: merchantsPhone, trigger: 'blur' }
        ],
        urgentContact: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        urgentContactPhone: [
          { required: true, validator: merchantsPhone, trigger: 'blur' }
        ],
        shopAge: [
          { required: true, message: '请选择开店日期', trigger: 'blur' }
        ],
        shopArea: [
          { required: true, message: '请输入店铺面积', trigger: 'blur' }
        ],
        isFishing: [
          { required: true, message: '请输入渔具品牌 ', trigger: 'blur' }
        ],
        fishAge: [
          { required: true, message: '请输入钓龄 ', trigger: 'blur' }
        ]
      }
    }
  },
  beforeMount() {
    this.dialogType = this.$route.params.dialogType
    this.editorTabeldata = this.$route.params.data
    this.getProvinceslist()
    if (this.dialogType === undefined) {
      this.$router.go(-1)
    } else if (this.dialogType === 2) {
      this.provinceListFun(this.editorTabeldata.addrRegion1Id)
      this.cityListFun(this.editorTabeldata.addrRegion2Id)
      for (const key in this.dialogBindData) {
        if (key === 'password') {
          this.dialogBindData[key] = this.editorTabeldata[key]
          this.dialogBindData.passwordnew = this.editorTabeldata[key]
        } else if (key === 'coordinateY') {
          this.dialogBindData[key] = this.editorTabeldata[key]
          this.userlocation.lng = this.editorTabeldata[key]
        } else if (key === 'coordinateX') {
          this.dialogBindData[key] = this.editorTabeldata[key]
          this.userlocation.lat = this.editorTabeldata[key]
        } else if (key === 'addrStreet') {
          this.dialogBindData[key] = ''
          this.dialogBindData.addrStreetSpan = this.editorTabeldata[key]
        } else if (key === 'urgentContact') {
          this.dialogBindData[key] = this.editorTabeldata[key].split(',')[0]
        } else if (key === 'urgentContactPhone') {
          this.dialogBindData[key] = this.editorTabeldata[key].split(',')[0]
        } else {
          this.dialogBindData[key] = this.editorTabeldata[key]
          this.dialogBindData.sellerId = this.editorTabeldata.sellerId
        }
      }
      this.disabled = true
    } else if (this.dialogType === 3) {
      this.provinceListFun(this.editorTabeldata.addrRegion1Id)
      this.cityListFun(this.editorTabeldata.addrRegion2Id)

      for (const key in this.dialogBindData) {
        if (key === 'password') {
          this.dialogBindData.passwordnew = this.editorTabeldata[key]
        } else if (key === 'picUrl') {
          if (this.editorTabeldata[key] === null || this.editorTabeldata[key] === undefined) {
            this.dialogBindData[key] = ''
          } else {
            this.dialogBindData[key] = this.editorTabeldata[key].split(',')
            this.base64ImgFun5()
          }
        } else if (key === 'coordinateY') {
          this.dialogBindData[key] = this.editorTabeldata[key]
          this.userlocation.lng = this.editorTabeldata[key]
        } else if (key === 'coordinateX') {
          this.dialogBindData[key] = this.editorTabeldata[key]
          this.userlocation.lat = this.editorTabeldata[key]
        } else if (key === 'addrStreet') {
          this.dialogBindData[key] = ''
          this.dialogBindData.addrStreetSpan = this.editorTabeldata[key]
        } else if (key === 'logoPicUrl') {
          this.base64ImgFun1(this.editorTabeldata.logoPicUrl)
        } else if (key === 'collectionCode') {
          this.base64ImgFun2(this.editorTabeldata.collectionCode)
        } else if (key === 'bizLicenseNoUrl') {
          this.base64ImgFun3(this.editorTabeldata.bizLicenseNoUrl)
        } else if (key === 'sellerCode') {
          this.base64ImgFun4(this.editorTabeldata.sellerCode)
        } else {
          this.dialogBindData[key] = this.editorTabeldata[key]
        }
      }
      this.disableIinput = true
      this.disabled = true
    }
  },
  mounted() {
    this.map()
  },
  methods: {
    // 省
    getProvinceslist() {
      const param = {
        parentId: 0
      }
      merchant.getProvinces(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        this.provinceList = res.data.data.records
      })
    },
    // 市
    provinceListFun(data) {
      this.dialogBindData.addrRegion2Id = ''
      this.dialogBindData.addrRegion3Id = ''
      const param = {
        parentId: data
      }
      merchant.getProvinces(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        this.cityList = res.data.data.records
      })
    },
    // 区
    cityListFun(data) {
      this.dialogBindData.addrRegion3Id = ''
      const param = {
        parentId: data
      }
      merchant.getProvinces(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        this.areaList = res.data.data.records
      })
    },
    submmitFun() {
      this.$refs.dianpuimg.incrementTotal()
      if (this.dialogType === 2) {
        if (this.dialogBindData.addrStreet === '') {
          this.dialogBindData.addrStreet = this.dialogBindData.addrStreetSpan
        } else {
          this.dialogBindData.addrStreet = this.dialogBindData.addrStreet
        }
      }
      const param = {
        sellerName: this.dialogBindData.sellerName,
        sysSellerName: this.dialogBindData.sysSellerName,
        addrRegion1Id: this.dialogBindData.addrRegion1Id,
        addrRegion2Id: this.dialogBindData.addrRegion2Id,
        addrRegion3Id: this.dialogBindData.addrRegion3Id,
        addrStreet: this.dialogBindData.addrStreet,
        userName: this.dialogBindData.userName,
        password: this.dialogBindData.password,
        urgentContact: this.dialogBindData.urgentContact,
        bizLicenseNoUrl: this.dialogBindData.bizLicenseNoUrl,
        logoPicUrl: this.dialogBindData.logoPicUrl,
        picUrl: this.dialogBindData.picUrl,
        urgentContactPhone: this.dialogBindData.urgentContactPhone,
        introduction: this.dialogBindData.introduction,
        memo: this.dialogBindData.memo,
        contactPerson: this.dialogBindData.contactPerson,
        contactMobile: this.dialogBindData.contactMobile,
        shopAge: parseInt(this.dialogBindData.shopAge),
        shopArea: this.dialogBindData.shopArea,
        wechatId: this.dialogBindData.wechatId,
        qq: this.dialogBindData.qq,
        mainBrand: this.dialogBindData.mainBrand,
        panorama: this.dialogBindData.panorama,
        authCertUrl: this.dialogBindData.authCertUrl,
        collectionCode: this.dialogBindData.collectionCode,
        fishAge: parseInt(this.dialogBindData.fishAge),
        isFishing: this.dialogBindData.isFishing,
        coordinateY: this.dialogBindData.coordinateY.toString(),
        coordinateX: this.dialogBindData.coordinateX.toString(),
        runningStatus: this.dialogBindData.runningStatus
      }
      if (this.dialogType === 2) {
        param.sellerId = this.dialogBindData.sellerId
        param.userId = this.dialogBindData.userId
        param.picId = this.dialogBindData.picId
      }
      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          if (this.dialogBindData.addrRegion1Id === '' || this.dialogBindData.addrRegion2Id === '') {
            this.$message({
              message: '请选择省市区',
              type: 'warning'
            })
            return false
          }
          if (this.dialogBindData.addrStreet === '') {
            this.$message({
              message: '请输入详细地址',
              type: 'warning'
            })
            return false
          }
          if (this.dialogType === 1) {
            const loading = this.$loading({
              lock: true,
              text: '保存中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            merchant.editorMerchantsList(param).then(res => {
              loading.close()
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.buttonState = false
              this.dialogBindData.addrStreet = ''
              this.$router.go(-1)
            }).catch(res => {
              this.$message({
                type: 'info',
                message: res.message
              })
              loading.close()
            })
          } else {
            const loading = this.$loading({
              lock: true,
              text: '保存中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            merchant.editorMerchantsList(param).then(res => {
              loading.close()
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.buttonState = false
              this.dialogBindData.addrStreet = ''
              this.$router.go(-1)
            }).catch(res => {
              this.$message({
                type: 'info',
                message: res.message
              })
              loading.close()
            })
          }
        } else {
          return false
        }
      })
    },
    map() {
      this.$nextTick(function() {
        var th = this
        // 创建Map实例
        /* global BMap*/
        var map = new BMap.Map('allmap')
        // 初始化地图,设置中心点坐标，
        var point = new BMap.Point(this.userlocation.lng, this.userlocation.lat) // 创建点坐标
        map.centerAndZoom(point, 11)
        map.enableScrollWheelZoom()
        var marker = new BMap.Marker(point)
        map.addOverlay(marker)

        var ac = new BMap.Autocomplete( // 建立一个自动完成的对象
          {
            'input': 'suggestId',
            'location': map
          })
        var myValue
        ac.addEventListener('onconfirm', function(e) { // 鼠标点击下拉列表后的事件
          var _value = e.item.value
          myValue = _value.province + _value.city + _value.district + _value.street + _value.business
          setPlace()
        })
        function setPlace() {
          map.clearOverlays() // 清除地图上所有覆盖物
          function myFun() {
            th.userlocation = local.getResults().getPoi(0).point // 获取第一个智能搜索的结果
            map.centerAndZoom(th.userlocation, 18)
            map.addOverlay(new BMap.Marker(th.userlocation)) // 添加标注

            th.dialogBindData.coordinateY = th.userlocation.lng
            th.dialogBindData.coordinateX = th.userlocation.lat
          }

          var local = new BMap.LocalSearch(map, { // 智能搜索
            onSearchComplete: myFun
          })
          local.search(myValue)
          th.dialogBindData.addrStreet = myValue

          // 测试输出坐标（指的是输入框最后确定地点的经纬度）
          map.addEventListener('click', function(e) {
            // 经度
            console.log(th.userlocation.lng)
            // 维度
            console.log(th.userlocation.lat)
          })
        }
      })
    },
    // 图片
    imgurlFun(data) {
      if (data[1] === 'logoimg') {
        this.dialogBindData.logoPicUrl = data[0]
      } else if (data[1] === 'qrcodeimg') {
        this.dialogBindData.collectionCode = data[0]
      } else if (data[1] === 'yingimg') {
        this.dialogBindData.bizLicenseNoUrl = data[0]
      } else if (data[1] === 'shouimg') {
        this.dialogBindData.authCertUrl = data[0]
      } else if (data[1] === 'quanimg') {
        this.dialogBindData.panorama = data[0]
      }
    },
    imgurlFundianpu(data) {
      const arrImg = []
      for (const val of data) {
        arrImg.push(val.url)
      }
      this.dialogBindData.picUrl = arrImg.join(',')
    },
    // 下载图片
    downs() {
      this.downloadIamge(this.dialogBindData.sellerCode, this.dialogBindData.sellerName)
    },
    downloadIamge(imgsrc, name) { // 下载图片地址和图片名
      var image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function() {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据

        var a = document.createElement('a') // 生成一个a元素
        var event = new MouseEvent('click') // 创建一个单击事件
        a.download = name || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
    },
    // 将页面转化为图片
    dataURLToBlob(dataurl) { // ie 图片转格式
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    downloadResult() {
      const canvasID = this.$refs.imageDom
      const that = this
      const a = document.createElement('a')
      const opts = {
        logging: false, // 日志开关，便于查看html2canvas的内部执行流程
        useCORS: true // 【重要】开启跨域配置
      }
      html2canvas(canvasID, opts).then(canvas => {
        const dom = document.body.appendChild(canvas)
        dom.style.display = 'none'
        a.style.display = 'none'
        document.body.removeChild(dom)
        const blob = that.dataURLToBlob(dom.toDataURL('image/png'))
        a.setAttribute('href', URL.createObjectURL(blob))
        a.setAttribute('download', this.dialogBindData.sellerName)
        document.body.appendChild(a)
        a.click()
        URL.revokeObjectURL(blob)
        document.body.removeChild(a)
      })
    },
    // 店铺logo
    base64ImgFun1(data) {
      merchant.base64Img(data).then(res => {
        if (res.data.code === 1) {
          this.dialogBindData.logoPicUrl = res.data.data
        }
      })
    },
    // 收款二维码
    base64ImgFun2(data) {
      merchant.base64Img(data).then(res => {
        if (res.data.code === 1) {
          this.dialogBindData.collectionCode = res.data.data
        }
      })
    },
    // 营业执照
    base64ImgFun3(data) {
      merchant.base64Img(data).then(res => {
        if (res.data.code === 1) {
          this.dialogBindData.bizLicenseNoUrl = res.data.data
        }
      })
    },
    // 店铺小程序吗
    base64ImgFun4(data) {
      merchant.base64Img(data).then(res => {
        if (res.data.code === 1) {
          this.dialogBindData.sellerCode = res.data.data
        }
      })
    },
    base64ImgFun5() {
      const arr = []
      for (const val of this.dialogBindData.picUrl) {
        merchant.base64Img(val).then(res => {
          if (res.data.code === 1) {
            arr.push(res.data.data)
          }
        })
      }
      this.dialogBindData.picUrl = arr
    },
    goBack() {
     // this.$router.go(-1)
      if (this.dialogType === 1) {
        this.$router.go(-1)
      } else {
        this.$router.push({
          name: '/v1/merchant',
          params: {
            search: true
          }
        })
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss">
  .goodsBox{
    .el-form-item{
      margin-bottom: 12px;
    }
    .el-form-item__label{
      line-height: 18px;
      margin-top: 9px;
    }
    .el-form-item__error{
      top: 90%;
    }
    .el-pagination{
      text-align: right;
    }
    .el-dialog__header{
      margin-bottom: 0;
    }
    .el-table th{
      padding: 5px 0;
    }
  }
</style>
<style type="text/scss" lang="scss" scoped>
  .listName{
    margin: 0;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    background-color: white;
  }
  .address{
    font-size: 14px;
    color: #666;
    line-height: 40px;
  }
  .address span{
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  .imgStyle{
    width: 100px;
    height: 100px;
    display: block;
  }
  .imgStyleImg{
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
